<template>
	<view class="login-container">
		<view class="login-top">
			<image class="login-img" src="@/static/icon12.png" mode="aspectFit"></image>
		</view>

		<view class="login-form">
			<view class="title-tips">请填写邮箱地址</view>
			<u--form :model="form" ref="uForm" :rules="rules" labelWidth="80" :label-style="{color: '#666'}">
				<u-form-item label="邮箱地址" borderBottom prop="email">
					<u--input v-model="form.email" type="text" placeholder="请输入邮箱地址" border="none"></u--input>
				</u-form-item>
				<u-form-item label="密码" borderBottom prop="password">
					<u--input v-model="form.password" type="password" placeholder="请输入密码" border="none"></u--input>
				</u-form-item>
				<u-form-item label="确认密码" borderBottom prop="confirmPassword">
					<u--input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码"
						border="none"></u--input>
				</u-form-item>
				<u-form-item label="验证码" borderBottom prop="code">
					<u--input v-model="form.code" type="text" placeholder="请输入验证码" border="none">
						<template slot="suffix">
							<u-button @click="sendCode" :disabled="codeSending" size="mini">
								{{codeSending ? `${countdown}s后重新获取` : '发送验证码至邮箱'}}
							</u-button>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
			<u-toast ref="uToast" />
			<view class="submit-btn">
				<u-button type="primary" @click="handleSubmit" :loading="submitting" color="#FF7220" shape="circle"
					plain>确认注册</u-button>
			</view>

			<view class="other-login">
				<view class="divider">
					<text> 其他登录方式 </text>
				</view>
				<view class="login-icons">
					<view class="icon-item" @click="otherLogin('google')">
						<image src="/static/icon13.png" mode=""></image>

					</view>
					<view class="icon-item" @click="otherLogin('facebook')">
						<image src="/static/icon14.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRegister,
		getCode
	} from '@/api/user.js'
	export default {
		data() {
			return {
				form: {
					// email: '269569205@163.com',
					// email: '852596228@qq.com',
					// password: 'admin123456',
					// confirmPassword: 'admin123456',
					email: '',
					password: '',
					confirmPassword: '',
					code: ''
				},
				rules: {
					email: [{
						required: true,
						message: '请输入邮箱地址',
						trigger: ['blur', 'change']
					}, {
						type: 'email',
						message: '请输入正确的邮箱格式',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						message: '密码长度不能少于6位',
						trigger: ['blur', 'change']
					}],
					confirmPassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入的密码不一致'));
							} else {
								callback();
							}
						},
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}, {
						len: 6,
						message: '验证码长度应为6位',
						trigger: ['blur', 'change']
					}]
				},
				codeSending: false,
				countdown: 60,
				timer: null,
				submitting: false,
				showSuccessModal: false,
			}
		},
		onLoad() {},
		methods: {
			// 发送验证码
			sendCode() {
				if (this.codeSending) return

				// 验证邮箱格式
				if (!this.form.email) {
					this.$u.toast('请输入邮箱地址')
					return
				}

				this.codeSending = true
				this.countdown = 60
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						this.codeSending = false
						clearInterval(this.timer)
					}
				}, 1000)

				getCode({
					email: this.form.email,
					event: 'register'
				}).then(response => {
					console.log(response, 'response')
				})
			},

			// 提交注册
			async handleSubmit() {
				try {
					// 表单验证
					await this.$refs.uForm.validate()

					this.submitting = true
					// 调用注册接口
					const response = await getRegister({
						email: this.form.email,
						password: this.form.password,
						code: this.form.code
					})
					if (response.code === 200) {
						this.showSuccessModal = true
						// 注册成功后的处理
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/sign/sign'
							})
						}, 1500)
					} else {
						throw new Error(response.msg)
					}
				} catch (error) {
					this.$refs.uToast.show({
						type: 'error',
						message: error.message || '注册失败，请重试'
					})
				} finally {
					this.submitting = false
				}
			},

			// 第三方登录
			otherLogin(type) {
				// TODO: 实现第三方登录
				console.log('第三方登录类型：', type)
			}
		},
		onUnmounted() {
			// 清除定时器
			if (this.timer) {
				clearInterval(this.timer)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 40rpx;

		.login-top {
			display: flex;
			justify-content: center;
			margin-bottom: 60rpx;

			.login-img {
				width: 200rpx;
				height: 200rpx;
			}
		}

		.login-form {
			.u-button {
				color: #FF7220;
			}

			.title-tips {
				color: #333;
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 30rpx;
			}

			.submit-btn {
				margin-top: 140rpx;

				.u-button {
					width: 60%;
				}
			}

			.other-login {
				margin-top: 60rpx;

				.divider {
					position: relative;
					text-align: center;
					margin: 0 20%;
					margin-bottom: 40rpx;

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						width: 26%;
						height: 1px;
						background-color: #ddd;
					}

					&::before {
						left: 0;
					}

					&::after {
						right: 0;
					}

					text {
						background: #fff;
						padding: 0 20rpx;
						color: #999;
						font-size: 28rpx;
					}
				}

				.login-icons {
					display: flex;
					justify-content: center;

					.icon-item {
						margin: 0 20rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}
		}
	}
</style>